<div *ngIf="isLoaded == false" class="loader" id="backdrop">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>

<div class="row py-4 justify-content-center">
    <table class="col-10 col-md-8 col-lg-6 table table-sm table-dark p-2 text-center">
        <tr>
            <th colspan="10">
                {{skill.n}}
            </th>
        </tr>
        <tr>
            <td colspan="10">
                <img class="img-fluid" src="{{imgURL + '技能/' + skill.ref + '.webp'}}">
            </td>
        </tr>
        <tr>
            <th colspan="10">{{'SKILL-DETAIL.SKILL-DESCRIPTION' | translate}}</th>
        </tr>
        <tr>
            <td colspan="10">{{skill.des}}</td>
        </tr>
        <tr>
            <th colspan="10">{{'SKILL-DETAIL.SKILL-LEVEL' | translate}}</th>
        </tr>
        <tr>
            <th class="smallFont" *ngFor="let s of skillStatistic">Lv{{skillStatistic.indexOf(s) + 1}}</th>
        </tr>
        <tr>
            <td class="smallFont" *ngFor="let s of skillStatistic">{{s}}</td>
        </tr>
        <tr>
            <th colspan="10">{{'SKILL-DETAIL.RELATED-CARD' | translate}}</th>
        </tr>
        <tr>
            <td colspan="10">
                <span *ngIf="cards.length != 0; else noCard">
                    <span class="m-2" *ngFor="let c of cards">
                        <a [routerLink]="['/card-value/']" [queryParams]="{id: c._id}">
                            <img class="img-fluid cardIcon" src="{{imgURL + c.character + '/' + c.ref + '.webp'}}">
                        </a>
                    </span>
                </span>
                <ng-template #noCard>
                    <p>N/A</p>
                </ng-template>
            </td>
        </tr>
    </table>
</div>